<style type="text/css">
    .layui-table-body{overflow-x:auto;}
    .layui-table-cell{font-size:12px;}
</style>
<div class="layui-form hisi-search">
    <form action="{:url()}" method="get" id="hisi-table-search">
        <div class="layui-form-item">
            <label class="layui-form-label">产品名称</label>
            <div class="layui-input-inline">
              <input type="text" name="name" value="" class="layui-input field-product_id">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品编码</label>
            <div class="layui-input-inline">
              <input type="text" name="coded" value="" class="layui-input field-coded">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-inline">
                <select name="brand_id" class="layui-input field-brand_id" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    {volist name="brands" id='vo'}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                  </select>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商</label>
            <div class="layui-input-inline">
                <select name="supplier_id" class="layui-input field-supplier_id" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    {volist name="suppliers" id='vo'}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                  </select>

            </div>
        </div>
        <div class="layui-form-item hisi-search-btn">

            <div class="layui-input-inline">
                <button type="submit" class="layui-btn layui-btn-normal layui-icon layui-icon-search">执行</button>
                <button type="button" class="layui-btn layui-btn-warm layui-icon layui-icon-download-circle export">导出</button>
            </div>
        </div>
    </form>
</div>

<table id="dataTable"></table>

<script type="text/html" id="statusTpl">
    <input type="checkbox" name="status" value="{{ d.status }}" lay-skin="switch" lay-filter="switchStatus" lay-text="正常|关闭" {{ d.status == 1 ? 'checked' : '' }} data-href="{:url('status')}?id={{ d.id }}">
</script>
<script type="text/html" title="操作按钮模板" id="buttonTpl">
    <a href="{:url('edit')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-normal hisi-iframe-pop"  hisi-data="{width: '550px', height: '420px', title: '修改品牌'}">修改</a><a href="{:url('del')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-danger j-tr-del">删除</a>
</script>
{include file="system@block/layui" /}
<script id="toolbar" type="text/html">
    <a href="{:url('add')}" class="layui-btn layui-btn-normal layui-btn-sm hisi-iframe-pop" hisi-data="{width: '550px', height: '420px', title: '添加'}">&nbsp;添加</a>
</script>
<script type="text/javascript">
    layui.use(['table','jquery','excel'], function() {
        var table = layui.table;
        var $ = layui.jquery;
        table.render({
            elem: '#dataTable'
            ,url: '{:url()}' //数据接口
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,limit: 20
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar: '#toolbar'
            // ,initSort: {field:'id', type:'desc'}
            ,defaultToolbar: ['filter']
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'id', title: 'ID'}
                ,{field: 'name', title: '产品名称'}
                ,{field: 'coded', title: '产品编码'}
                ,{field: 'supplier_id', title: '产品供应商',templet:function(d){
                    return d.has_supplier.name;
                }}
                ,{field: 'category_id', title: '产品所属分类',templet:function(d){
                    return d.has_category.name;
                }}
                ,{field: 'brand_id', title: '产品所属品牌',templet:function(d){
                    return d.has_brand.name;
                }}
                ,{field: 'price1', title: '成本价'}
                ,{field: 'price2', title: '售价'}
                ,{field: 'specs', title: '规格'}
                ,{field: 'unit_id', title: '单位'}
                ,{field: 'decomposition_id', title: '分解单位'}
                ,{field: 'weigh', title: '排序'}
                ,{field: 'status', title: '状态', templet:"#statusTpl"}
                ,{title: '操作', width: 120, templet: '#buttonTpl'}
            ]]

        });

        var excel = layui.excel;
        $(document).on('click','.export',function(){
            var form = $('#hisi-table-search').serializeArray();
            var where = new Array();
            form.push({name:'operation',value:2});
            $.ajax({
               url: '{:url('import')}',
               data:form,
               dataType: 'json',
               success: function(res) {
                   // 假如返回的 res.data 是需要导出的列表数据
                   console.log(res.data);// [{name: 'wang', age: 18, sex: '男'}, {name: 'layui', age: 3, sex: '女'}]
                   // 1. 数组头部新增表头
                   // 'ID','项目名称','数量','金额','手工','结算方式','职位','提成比例','添加时间','订单编号','会员','门店','员工','提成金额'
                   res.data.unshift({
                       id: '编号',
                       name:'产品名称',
                       coded:'产品编码',
                       supplier:'产品供应商',
                       category:'产品所属分类',
                       brand:'产品所属品牌',
                       price1:'成本价',
                       price2:'售价',
                       specs:'规格',
                       unit_id:'单位',
                       decomposition_id:'分解单位',
                       weigh:'排序',
                       });
                   // 2. 如果需要调整顺序，请执行梳理函数
                   var data = excel.filterExportData(res.data, [
                       'id',
                       'name',
                       'coded',
                       'supplier',
                       'category',
                       'brand',
                       'price1',
                       'price2',
                       'specs',
                       'unit_id',
                       'decomposition_id',
                       'weigh',
                   ]);
                   // 3. 执行导出函数，系统会弹出弹框
                   excel.exportExcel({
                       sheet1: data
                   }, '产品.xlsx', 'xlsx');
               }
           });
        })
    });
</script>
